/**
 * Created by 30947 on 2018/7/18.
 */
$(function () {

    char1();
    char2();
    char3();
    char4();

})

//统计分析图
function char1() {

    var myChart = echarts.init($("#char1")[0]);

    var trafficWay = [{
        name: '长管拖车',
        value: 10
    }, {
        name: '储氢罐',
        value: 20
    }, {
        name: '压缩机',
        value: 30
    }, {
        name: '加氢机',
        value: 40
    }];
    var data = [];
    var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
    for (var i = 0; i < trafficWay.length; i++) {
        data.push({
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor: color[i],
                    shadowColor: color[i]
                }
            }
        }, {
            value: 2,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        });
    }
    var seriesOption = [{
        type: 'pie',
        clockWise: false,
        radius: [75, 79],
        center: ['50%','45%'],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            return '设备：' + params.name + '\n' + '\n' + '数量：' + params.value;
                        } else {
                            return '';
                        }
                    },
                },
                labelLine: {
                    length: 10,
                    length2: 20,
                    show: true,
                    color: '#00ffff'
                }
            }
        },
        data: data
    }];

    option = {
        color: color,
        tooltip: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: seriesOption
    }

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })

}

function char2() {

    var myChart = echarts.init($("#char2")[0]);

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {show: 'true', borderWidth: '0'},
        legend: {
            data: ['行驶', '停车', '熄火', '离线'],
            textStyle: {
                color: '#ffffff',

            }
        },

        calculable: false,
        xAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#f2f2f2'],
                        width: 0,
                        type: 'solid'
                    }
                }

            }
        ],
        yAxis: [
            {
                type: 'category',
                data: ['客运车', '危险品车', '网约车', '学生校车'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    lineStyle: {
                        width: 0,
                        type: 'solid'
                    }
                }
            }
        ],
        series: [
            {
                name: '行驶',
                type: 'bar',
                stack: '总量',
                itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                data: [320, 302, 301, 334]
            },
            {
                name: '停车',
                type: 'bar',
                stack: '总量',
                itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                data: [120, 132, 101, 134]
            },
            {
                name: '熄火',
                type: 'bar',
                stack: '总量',
                itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                data: [220, 182, 191, 234]
            },
            {
                name: '离线',
                type: 'bar',
                stack: '总量',
                itemStyle: {normal: {label: {show: true, position: 'insideRight'}}},
                data: [150, 212, 201, 154]
            }

        ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })

}

function char3() {

    var myChart = echarts.init($("#char3")[0]);

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 3,
            itemGap: 13,
            data: ["耗氢量"],
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#ccc'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            top: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                },
                show: false
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#57617B'
                },
                show: false
            },
            data: ['06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05']
        }],
        yAxis: [{
            type: 'value',
            name: '单位（kg）',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                },
                show: false
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#57617B'
                },

            }
        }],
        series: [{
            name: '耗氢量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 3
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(205,52,42, 0.5)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(235,235,21, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
            },
            itemStyle: {
                normal: {

                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(205,52,42,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(235,235,21,1)'
                    }])
                },
                emphasis: {
                    color: 'rgb(99,250,235)',
                    borderColor: 'rgba(99,250,235,0.2)',
                    extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                    borderWidth: 10
                }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220]
        }]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })

}

function char4() {

    var myChart = echarts.init($("#char4")[0]);

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '7%',
            top: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                margin: 10,
                color: '#57617B',
                textStyle: {
                    fontSize: 14
                },
            },
        }],
        yAxis: [{
            name: '次数',
            axisLabel: {
                formatter: '{value}',
                color: '#57617B',
            },
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: [300, 450, 770, 203, 255, 188, 156],
            barWidth: '20px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
        }]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    })

}
